<script>
// 配置属性都是以 `${namespace}.${field}` 的格式组成
import { parseField, getDefaultValueComponent, propsExt } from './mixins.js'

export default {
  name: 'SettingItemDispatcher',
  props: {
    setting: {
      type: Object,
      default () {
        return {}
      }
    },
    field: {
      type: String,
      default: ''
    }
  },
  functional: true,
  render (h, context) {
    const setting = context.props.setting
    const parser = parseField(context.props.field)
    let props = {
      id: setting.id,
      fullField: context.props.field,
      shortField: parser.field,
      value: setting.options[parser.field]
    }
    let component
    switch (context.props.field) {
      case 'form.name':
      case 'form.width':
      case 'form.key':
      case 'form.placeholder':
        component = require('./widgets/input').default
        break
      case 'grid.gutter':
        component = require('./widgets/input-number').default
        break
      case 'form.defaultValue':
        component = getDefaultValueComponent(setting.type)
        break
      // case 'form.key':
      //   component = getDefaultValueComponent(setting.type)
      //   break
      case 'form.disabled':
      case 'form.multiple':
        component = require('./widgets/switch').default
        break
      case 'grid.justify':
      case 'grid.align':
      case 'form.buttonType':
      case 'form.buttonShape':
      case 'form.buttonSize':
        props = { ...props, ...propsExt[context.props.field](setting) }
        component = require('./widgets/select').default
        break
      case 'grid.columns':
        props = { ...props, ...propsExt[context.props.field](setting) }
        component = require('./widgets/input-number-list').default
        break
      case 'form.options':
        props = { ...props, ...propsExt[context.props.field](setting) }
        component = require('./widgets/options').default
        break
      case 'form.event':
        component = require('./widgets/associated-event').default
        break
    }
    return h(component, { props })
  }
}
</script>
